<template>
  <div class="app-container">
    <div class="filter-container">
      <p style="display:inline-block;margin-left:2%">姓名：</p>
      <el-input
        v-model="detailsQuery.realName"
        size="small"
        placeholder="姓名"
        style="width: 200px;margin-left:2%"
        class="filter-item"
        @keyup.enter.native="handleFilter" />
        <p style="display:inline-block;margin-left:2%">地址：</p>
      <el-input
        v-model="detailsQuery.address"
        size="small"
        placeholder="地址"
        style="width: 200px;margin-left:2%"
        class="filter-item"
        @keyup.enter.native="handleFilter" />
      <p style="display:inline-block;margin-left:2%">账号：</p>
      <el-input
        v-model="detailsQuery.userName"
        size="small"
        placeholder="手机号"
        style="width: 200px;margin-left:2%"
        class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-button
        size="small"
        class="filter-item"
        type="success"
        icon="el-icon-search"
        style="margin-left:3%"
        @click="handleFilter"
      >
        搜索
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      :data="list"
      size="small"
      border
      fit
      highlight-current-row
      style="width: 100%;margin-top:1%"
    >
    <el-table-column type="index">
    </el-table-column>
    <el-table-column label="APP账户" width="300px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="250px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址" min-width="300px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="小康币总金额(元)" width="300px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.xkbTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column :formatter='formatter' label="最后登陆时间" prop="createTime" width="300px" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="setUp(scope.row)" style="color:blue;" type="text">查看详情</el-button>
          </template>
        </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="detailsQuery.pageNum"
      :limit.sync="detailsQuery.pageSize"
      @pagination="getList"
    />
    <el-dialog
      :close-on-click-modal="false"
      title="用户详情"
      :visible.sync="dialogFormVisible"
      append-to-body
      width="80%"
    >
      <el-form
        :model="liaUserList"
        label-position="left"
        style="margin-left:50px;"
      >
        <el-form-item
          label-width="60px"
          style="float:left; width:33%"
          label="姓名:"
        >
          <span>{{ liaUserList.realName }}</span>
        </el-form-item>
        <el-form-item
          label-width="60px"
          style="float:left; width:33%"
          label="手机号:"
        >
          <span>{{ liaUserList.userName }}</span>
        </el-form-item>
        <!-- <el-form-item
          label-width="60px"
          style="float:left; width:33%"
          label="年龄:"
        >
          <span>{{ liaUserList.gender }}</span>
        </el-form-item> -->
        <el-form-item
          label-width="100px"
          style="float:left; width:33%"
          label="出生年月:"
        >
          <span>{{ liaUserList.birth }}</span>
        </el-form-item>
        <el-form-item
          label="性别："
          label-width="80px"
          style="float:left;width:33%"
        >
          <span>{{ liaUserList.gender }}</span>
        </el-form-item>
        <el-form-item
          label-width="100px"
          style="float:left;width:33%"
          label="身份证号："
        >
          <span>{{ liaUserList.idCard }}</span>
        </el-form-item>
        <el-form-item
          label-width="60px"
          style="float:left;width:33%"
          label="地址："
        >
          <span>{{ liaUserList.address }}</span>
        </el-form-item>
      </el-form>
      <span style="display:block; width:100%; height:1px; background:#E5E5E5;" />
      <div
        class="filter-container"
        style="margin-top:15%"
      >
        <p style="float:left;font-size:26px;font-weight:bolder">小康币总金额:{{totalObj.totalFee}}</p>
        <p style="float:right;margin-right:2%">总收入：{{totalObj.income}}</p>
        <p style="float:right;margin-right:2%">总支出：{{totalObj.outlay}}</p>
      </div>
      <el-table
        :key="tableKey"
        :data="liaUser"
        size="small"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column
          label="创建时间"
          width="200px"
          align="center"
          :formatter='formatter1'
          prop="createTime"
        >
        </el-table-column>
        <el-table-column
          label="账单编号"
          min-width="150px"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.billNumber }}</span>
            <!-- <el-tag>{{ row.type | typeFilter }}</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column
          label="账单类型"
          width="200px"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.billType==='FARM'?'小康农场':row.billType==='NEW_USER'?'注册':row.billType==='SIGN_IN'?'用户签到':row.billType==='TURNTABLE'?'幸运大转盘':row.billType==='WEEKPRIZE'?'周周抽大奖':row.billType==='PROINFOEXCHANGE'?'商品兑换':row.billType==='PERSONALDATA'?'完善个人信息':row.billType==='GOODSDONATION'?'好物捐赠':'邀请新用户' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="备注说明"
          width="250px"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="支出/抵扣"
          width="150px"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.inOrPay==='IN'?'+'+row.amount:'-'+row.amount }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total1"
        :page.sync="listQuery.pageNum"
        :limit.sync="listQuery.pageSize"
        @pagination="handlePage"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          返回
        </el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
        >
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 异步请求 delLly
import { getListPage,getDetails,getDetailsList,getTotal } from '@/api/userInformation/index'
import Vue from 'vue'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // 分页插件


export default {
  inject:["reload"],
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    },
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      total1:0,
      liaUserList: {},
      userId:'',
      detailsQuery:{
        pageNum: 1,
        pageSize: 10,
        realName:'',
        userName:'',
        address:''
      },
      liaUser:null,
      listQuery:{
        pageNum: 1,
        pageSize: 10,
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加',
      },
      rowId:"",
      rowTemp:{},
      totalObj:{},
    }
  },
  created() {
    this.getList()
  },
  methods: {
    parseTime,
    formatter(row, column) {
      return parseTime(row.createTime);
    },
    formatter1(row, column) {
      return parseTime(row.createTime);
    },
    handlePage(){
      this.setUp(this.rowTemp)
    },
    setUp(row){
      this.rowId=row.id
      this.rowTemp=row
      this.userId = row.userId
      this.dialogFormVisible=true
      getDetails(this.userId).then(res => {
        this.liaUserList = res.data
      })
      var params={
        pageNum: this.listQuery.pageNum-1,
        pageSize: this.listQuery.pageSize,
        userId:this.userId
      }
      getDetailsList(params).then(res=>{
        this.liaUser=res.data.content
        this.total1=res.data.totalElements
      })
      getTotal(this.userId).then(res=>{
        this.totalObj=res.data
      })
    },
    getList() {
      var params = {
        // pageConvert: true,
        pageNum: this.detailsQuery.pageNum-1,
        pageSize: this.detailsQuery.pageSize,
        address:this.detailsQuery.address,
        realName:this.detailsQuery.realName,
        userName:this.detailsQuery.userName
      }
      getListPage(params).then(response => {
        this.list = response.data.content
        this.total = response.data.totalElements
        // Just to simulate the time of the request
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}`
        ? 'ascending'
        : sort === `-${key}`
          ? 'descending'
          : ''
    }
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
